<template>
  <div class="page page-notice">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">通知公告</div>
      </div>
    </div>
    <div class="page-content infinite-scroll-content">


      <div class="list media-list" id="notice-list">
        <ul>



        </ul>
      </div>
    </div>
  </div>


</template>
<style>
  .page-notice .media-list .item-media > img {
    width: 60px !important;
    height: 44px !important;
  }
  .page-notice .media-list .item-title {
    font-size: 14px;
  }
  .page-notice .media-list .item-subtitle {
    font-size: 14px;
    color: #aaa;
  }
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);
    },
    mounted() {
      console.log('componentMounted', this);
      console.log('组件转载完成，拿全局变量中的用户信息去查询后台', this.$root.user);
      // 查询所有的通知公告
      // 拿到数据赋值到js
      app.preloader.show();//打开加载器
      setTimeout(function () {
        this.lists =  [
          {id:1001,title:'通知公告模拟数据标题1公告模拟数据标题1公告模拟数据标题1',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listdefault.png'},
          {id:1002,title:'通知公告模拟数据标题2公告模拟数据标题2公告模拟数据标题2',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1003,title:'通知公告模拟数据标题3公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1004,title:'通知公告模拟数据标题4公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1005,title:'通知公告模拟数据标题5公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1006,title:'通知公告模拟数据标题6公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1007,title:'通知公告模拟数据标题7公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1008,title:'通知公告模拟数据标题8公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1009,title:'通知公告模拟数据标题9公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'},
          {id:1010,title:'通知公告模拟数据标题10公告模拟数据标题3公告模拟数据标题3',subtitle:'2018/01/22 11:11:11',imgsrc:'./imgs/notice/listimg.png'}
        ];
        this.updataNoticeView();
        app.preloader.hide();//获取数据成功 更新视图 关闭加载器
      }.bind(this),100)
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);

    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        lists: []
      }
    },
    // Component Methods
    methods: {
      updataNoticeView: function () {
        var str = '';
        for (var i = 0; i < this.lists.length; i++) {
          str += `
          <li data-list-id="${this.lists[i].id}">
            <a href="/notice-details-component/${this.lists[i].id}/${this.lists[i].title}" class="item-link item-content">
              <div class="item-media"><img src=${this.lists[i].imgsrc} width="60"/></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">${this.lists[i].title} </div>
                </div>
                <div class="item-subtitle">${this.lists[i].subtitle}</div>
              </div>
            </a>
          </li>
              `
        }
        $$('#notice-list ul').html(str);
      },
      infiniteScroll:function(){
        console.log(111)
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
        $$('.infinite-scroll-content').on('infinite', this.infiniteScroll)
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page);
      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
